<!DOCTYPE html>
<html>
<head>
  <title>Options :: Server IP</title>
  <style type="text/css">
    body {
      min-width: 500px;
    }
    textarea,
    input[type=text] {
      width: 100%;
      box-sizing: border-box;
    }
    .comment {
      background-color: rgba(0, 0, 0, 0.05);
      padding: 5px;
      font-size: 90%;
    }
  </style>
  <meta charset="utf-8">
</head>
<body>
  <table width="100%">
    <colgroup>
      <col width=100>
      <col>
      <col width="24">
    </colgroup>
    <tr>
      <td>Server:</td>
      <td colspan="2"><input type="text" id="info"></td>
    </tr>
    <tr>
      <td colspan="3" class="comment">
        <div style="display: flex; align-items: center">
          <code>[ip]</code>&nbsp;keyword will be replaced with the actual IP address
        </div>
      </td>
    </tr>
    <tr>
      <td>Char Length:</td>
      <td colspan="2"><input type="number" id="char" min="3" max="20"></td>
    </tr>
    <tr>
      <td colspan="3" class="comment">Length in pixel for each character in the IP address</td>
    </tr>
    <tr>
      <td>Formatting:</td>
      <td><label for="uppercase">Show IP address in uppercase format</label></td>
      <td><input type="checkbox" id="uppercase"></td>
    </tr>
    <tr>
      <td>Styling:</td>
      <td colspan="2">
        <textarea id="ip-css" cols="5" placeholder="Use CSS rules to style the IP iframe (e.g. body {background-color: red;})"></textarea>
      </td>
    </tr>
  </table>
  <div id="explore"></div>
  <p>For more options, use my <a href="https://add0n.com/country-flags.html">Country Flags &amp; IP WHOIS</a> extension.</p>
  <p>
    <input type="button" value="Support Development" id="support">
    <input type="button" value="Factory Reset" id="reset"> - <input type="button" value="Save" id="save">
    <span id="toast"></span>
  </p>
  <script type="text/javascript" src="index.js"></script>
  <script asyn type="text/javascript" src="matched.js"></script>
</body>
</html>
